<template>
  <div class="container">
    <!--form表单容器-->
    <div class="forms-container">

        <!--登录-->
        <el-form :model="loginForm" ref="lbLogin" label-width="80px"  :rules="rules" class="loginForm">
          <h3 class="login-title">欢迎登录</h3>
          <el-form-item label="用户名" prop="name">
            <el-input v-model="loginForm.name" placeholder="请输入用户名..."></el-input>
          </el-form-item>
          <el-form-item label="密&nbsp;&nbsp;&nbsp;码" prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码..."></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="submit-btn" @click="onSubmit('lbLogin')">提交</el-button>
          </el-form-item>
        </el-form>
        <!--找加密码-->
        <div class="tiparea">
          <p>
            忘记密码？<a href="#">立即找回</a>
            &nbsp;&nbsp;&nbsp;&nbsp;<a href="/register">注册</a>
          </p>

        </div>
        <!--注册-->

      </div>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default {
  name: 'Login',
  components: {},
  setup (props) {
    const state = reactive({
      loginForm: {
        name: '',
        password: ''
      },
      rules: { // 校验规则
        name: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '密码长度必须在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    })
    const { ctx } = getCurrentInstance()
    const router = useRouter()
    // 触发方法
    const onSubmit = (formName) => {
      ctx.$refs[formName].validate((valid) => {
        if (valid) {
          ctx.$axios.post('http://localhost/login.php/').then(res => {
            if (res.data) {
              router.push('./homepage')
            } else {
              ElMessage.warning({
                message: '您的用户名和密码不正确！',
                type: 'warning'
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    return {
      ...toRefs(state),
      onSubmit
    }
  }
}
</script>

<style scoped>
.container{
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 300px;
  overflow: hidden;
  /* box-shadow: 10px 10px 5px #888888; */
}
.forms-container{
  width:400px;
  margin:50px auto;
  border:1px solid #dcdfe6;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 5px 5px 30px #dcdfe6;
}
.login-title{
  text-align: center;
  font-weight: bolder;
  margin-bottom: 30px;
}
.submit-btn{
  width: 100%;
}
.tiparea{
  text-align: right;
  font-size: 12px;
  color: #333;
}
.tiparea p a{
  color: #409eff;
  text-decoration: none;
}

</style>
